<%--
  Created by IntelliJ IDEA.
  User: z5727
  Date: 2022/10/23
  Time: 23:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set value="${pageContext.request.contextPath}" var="path"></c:set>
<style>
    #work_exe_info>ul>li,#cadre-info>ul>li,#edu-info>ul>li{
        margin-top: 20px;
        font-weight: bolder;
    }
    .jobOris,.work_exes,.cadres,.stu-edus{
        list-style: none;
    }
    #tecnology_titie,#jobOri_title,#work_exe_title,#edu-title,#cadre-title,#honor_titie{
        margin-top: 30px;
        font-weight: bold;
        margin-left: 20px;
    }
    #tecnology,#work_exe,#stu-edu,#stu-cadre,#honor{
        margin-top: 50px;
    }
    #yu_lan_title{
        color: #ffd700;
        font-size: 30px;
        font-family: '宋体';
    }
    #yu_lan_info{
        margin-top: 20px;
        text-align: center;
    }
    #face_pic{
        border: 5px solid #ffd700;
        border-radius: 100%;
        width: 100px;
        height: 100px;
    }
    #user_lianXi{
        /*display: flex;*/
        text-align: center;
    }
    #user_name{
        font-weight: bold;
    }
    #user_info_title{
        margin-top: 30px;
        font-weight: bold;
        margin-left: 20px;
    }
    #user_major,#tec_info,#jobOri_info,#edu-info,#cadre-info,#honor_info{
        margin-left: 20px;
    }
    #user_major>ul,#tec_info>ul,#jobOri_info>ul,.jobOris,#honor_info>ul{
        display: flex;
        flex-wrap: wrap;
    }
    #work_exe_info{
        margin-left: 20px;
    }
    .jobOris>li:nth-of-type(even),#honor_info>ul li:nth-of-type(even){
        width: 200px;
        height: 30px;
        margin-left: 150px;
        margin-bottom: 20px;
        font-weight: bolder;
    }
    .jobOris>li:nth-of-type(odd),#honor_info>ul li:nth-of-type(odd){
        width: 200px;
        height: 30px;
        margin-bottom: 20px;
        font-weight: bolder;
    }
    #user_major>ul li:nth-of-type(even),#tec_info>ul li:nth-of-type(even){
        width: 300px;
        height: 30px;
        margin-left: 100px;
        margin-bottom: 20px;
        font-weight: bolder;
    }
    #user_major>ul li:nth-of-type(odd),#tec_info>ul li:nth-of-type(odd),#honor_info>ul li:nth-of-type(odd){
        width: 200px;
        height: 30px;
        margin-bottom: 20px;
        font-weight: bolder;
    }
    /*#user_major>ul li:nth-of-type(odd){*/
    /*    font-weight: bolder;*/
    /*}*/
    #user_major>ul li::marker,#tec_info>ul li::marker,#jobOri_info>ul>li::marker,#work_exe_info>ul>li::marker,#edu-info>ul>li::marker,#cadre-info>ul>li::marker,#honor_info>ul>li::marker{
        color: #ffd700;
    }
</style>
<div id="modal">
    <!-- 弹窗 -->
    <div id="modal-content" style="overflow: scroll;">
        <span id="yu_lan_title">预览简历</span>
        <span id="close">&times;</span>
        <div id="yu_lan_info">
            <div id="yu_lan_face">
                <img src="/static/web/images/${requestScope.user.face}" id="face_pic"/>
            </div>
            <div>
                <h3 id="user_name">${requestScope.user.name}</h3>
            </div>
            <div>
                ${requestScope.user.sex}|<span id="user_age"></span>|${requestScope.user.school}
            </div>
            <div id="user_lianXi">
                <i class="iconfont">&#xe88b;</i>${requestScope.user.phone} &nbsp;&nbsp;&nbsp;<i class="iconfont">&#xe908;</i>${requestScope.user.email}
            </div>
        </div>
        <div id="user_info">
            <h4 id="user_info_title">个人信息详细</h4>
            <hr style="color: #ffd700;height: 2px;">
            <div id="user_major">
                <ul>
                    <li id="li_a">所学专业：<c:if test="${requestScope.user.major==null||requestScope.user.major==''}" var="inMajor">未填</c:if><c:if test="${not inMajor}">${requestScope.user.major}</c:if></li>
                    <li>qq账号:<c:if test="${requestScope.user.qq==null||requestScope.user.qq==''}" var="inQQ">未填</c:if><c:if test="${not inQQ}">${requestScope.user.qq}</c:if></li>
                    <li>民族:<c:if test="${requestScope.user.national==null||requestScope.user.national==''}" var="inNa">未填</c:if><c:if test="${not inNa}">${requestScope.user.national}</c:if></li>
                    <li>婚姻状况:<c:if test="${requestScope.user.marriage==null||requestScope.user.marriage==''}" var="inMa">未填</c:if><c:if test="${not inMa}">${requestScope.user.marriage}</c:if></li>
                    <li>现居地:<c:if test="${requestScope.user.nowIn==null||requestScope.user.nowIn==''}" var="inNow">未填</c:if><c:if test="${not inNow}">${requestScope.user.nowIn}</c:if></li>
                    <li>籍贯:<c:if test="${requestScope.user.nativePlace==null||requestScope.user.nativePlace==''}" var="inPl">未填</c:if><c:if test="${not inPl}">${requestScope.user.nativePlace}</c:if></li>
                    <li>政治面貌:<c:if test="${requestScope.user.politicalLandscape==null||requestScope.user.politicalLandscape==''}" var="inPo">未填</c:if><c:if test="${not inPo}">${requestScope.user.politicalLandscape}</c:if></li>
                    <li>求职状态:<c:forEach items="${requestScope.jobStatuses}" var="jobstatus"><c:if test="${jobstatus.id==requestScope.user.jobStatusId}">${jobstatus.jobStatusInfo}</c:if> </c:forEach> </li>
                    <li id="li_info" style="width: 400px;height: 100px;">详细信息：${requestScope.user.introduction}</li>
                </ul>
            </div>
        </div>
        <div id="tecnology">
            <h4 id="tecnology_titie">技能</h4>
            <hr style="color: #ffd700;height: 2px;">
            <div id="tec_info">
                <ul>
                    <c:forEach items="${requestScope.technologies}" var="technology">
                        <li>${technology.technologyLabel}</li>
                    </c:forEach>
                </ul>
            </div>
        </div>
        <div id="jobOri">
            <h4 id="jobOri_title">求职意向</h4>
            <hr style="color: #ffd700;height: 2px;">
            <div id="jobOri_info">
                <ul>
                    <c:forEach items="${requestScope.jobOrientations}" var="jobOrientation">
                        <li>
                            <ul class="jobOris">
                                <li>期望职位类型：${jobOrientation.positionTypeSecond.typeName}</li>
                                <li>期望行业类型：${jobOrientation.positionType.typeName}</li>
                                <li>期望城市：${jobOrientation.city.province.provName}${jobOrientation.city.cityName}</li>
                                <li>期望薪资：${jobOrientation.salary.salaryInfo}</li>
                                <li>期望工作性质：<c:if test="${jobOrientation.workNature}" var="isWork">全职</c:if><c:if test="${not isWork}">兼职</c:if> </li>
                            </ul>
                        </li>
                    </c:forEach>
                </ul>
            </div>
        </div>
        <div id="work_exe">
            <h4 id="work_exe_title">工作经验</h4>
            <hr style="color: #ffd700;height: 2px;">
            <div id="work_exe_info">
                <ul>
                    <c:forEach items="${requestScope.workExperiences}" var="workExperience">
                        <li>
                            <ul class="work_exes">
                                <li>职称：${workExperience.name}</li>
                                <li>公司名称：${workExperience.companyName}</li>
                                <li>工作时间：<fmt:formatDate value="${workExperience.inServiceTime}" pattern="yyyy年MM月"/> -  <fmt:formatDate value="${workExperience.outServiceTime}" pattern="yyyy年MM月"/></li>
                                <li>工作描述：${workExperience.jobDescription}</li>
                            </ul>
                        </li>
                    </c:forEach>
                </ul>
            </div>
        </div>
        <div id="stu-edu">
            <h4 id="edu-title">教育和培训经历</h4>
            <hr style="color: #ffd700;height: 2px;">
            <div id="edu-info">
                <ul>
                    <c:forEach items="${requestScope.educationExperiences}" var="educationExperience">
                        <li>
                            <ul class="stu-edus">
                                <li>学校名称：${educationExperience.schoolName}</li>
                                <li>就读时间：<fmt:formatDate value="${educationExperience.beginTime}" pattern="yyyy年MM月"/> - <fmt:formatDate value="${educationExperience.endTime}" pattern="yyyy年MM月"/> </li>
                                <li>经历描述：${educationExperience.introduction}</li>
                            </ul>
                        </li>
                    </c:forEach>
                </ul>
            </div>
        </div>
        <div id="stu-cadre">
            <h4 id="cadre-title">学生干部经历</h4>
            <hr style="color: #ffd700;height: 2px;">
            <div id="cadre-info">
                <ul>
                    <c:forEach items="${requestScope.studentCadreExperiences}" var="studentCadreExperience">
                        <li>
                            <ul class="cadres">
                                <li>干部经历：${studentCadreExperience.rankOfCadre}</li>
                                <li>经历时间：<fmt:formatDate value="${studentCadreExperience.beginTime}" pattern="yyyy年MM月"/> -  <fmt:formatDate value="${studentCadreExperience.endTime}" pattern="yyyy年MM月"/></li>
                                <li>经历介绍：${studentCadreExperience.introduction}</li>
                            </ul>
                        </li>
                    </c:forEach>
                </ul>
            </div>
        </div>
        <div id="honor">
            <h4 id="honor_titie">所获荣誉</h4>
            <hr style="color: #ffd700;height: 2px;">
            <div id="honor_info">
                <ul>
                    <c:forEach items="${requestScope.honorsWons}" var="honorsWon">
                        <li>${honorsWon.honorsWonInfo}</li>
                    </c:forEach>
                </ul>
            </div>
        </div>
    </div>
</div>
<style>
    * {
        padding: 0px;
        margin: 0px;
    }
    /* 弹窗背景 */
    #modal {
        width: 100%;
        height: 100%;
        /* 默认隐藏 */
        /* display: none; */
        /* 固定定位 */
        position: fixed;
        /* 设置在顶层 */
        z-index: 1000;
        /* 设置位置 */
        left: 0;
        top: 0;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.4);
    }
    /* 弹窗内容 */
    #modal-content {
        position: relative;
        background-color: #fff;
        margin: 1% auto;
        border: 1px solid #888;
        width: 700px;
        height: 900px;
        z-index: 1001;
    }
    /* 关闭按钮 */
    #close {
        position: absolute;
        right: 20px;
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }
    /* 设置关闭按钮的鼠标指针 */
    #close:hover,
    #close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }
</style>